<style lang="less">
    @import '../../styles/loading.less';
</style>

<template>
    <div>
        <Col span="12">
            <Card>
                <p slot="title" style="height:25px;">
                    <Icon type="plus-round"></Icon> {{goods_id?'编辑':'新增'}}产品
                </p>
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                    <Form-item label="产品分类" prop="cat_id">
                        <Select v-model="formValidate.cat_id" style="width:200px">
                            <Option v-for="item in catList" :key="item.cat_id" :value="item.cat_id" >{{item.name}}</Option>
                        </Select>
                    </Form-item>
                    <Form-item label="产品名称" prop="goods_name">
                        <Input v-model="formValidate.goods_name" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="编号" prop="goods_sn">
                        <Input v-model="formValidate.goods_sn" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="价格" prop="price">
                        <Input v-model="formValidate.price" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="市场价" prop="market_price">
                        <Input v-model="formValidate.market_price" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="排序" prop="sort">
                        <Input v-model="formValidate.sort" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="虚拟销量" prop="virtual_sales" v-if="!goods_id">
                        <Input v-model="formValidate.virtual_sales" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="是否上线" prop="is_online">
                        <Radio-group v-model="formValidate.is_online">
                            <Radio label="1">是</Radio>
                            <Radio label="0">否</Radio>
                        </Radio-group>
                    </Form-item>
                    <Form-item label="类型" prop="is_real">
                        <Radio-group v-model="formValidate.is_real">
                            <Radio label="1">实物产品</Radio>
                            <Radio label="0">虚拟产品</Radio>
                        </Radio-group>
                    </Form-item>
                    <Form-item label="封面" prop="cover_img">
                        <img :src="formValidate.cover_img+'?x-oss-process=image/resize,h_100'" v-if="formValidate.cover_img" style="margin: 10px;">
                        <uploadImg v-on:uploadImg="uploadImg"></uploadImg>
                    </Form-item>
                    <Form-item label="简介" prop="abstract">
                        <Input type="textarea" v-model="formValidate.abstract" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="详情" prop="goods_desc">
                        <tinymceEditor v-bind:textContent="formValidate.goods_desc" v-on:getEditor="getEditor"></tinymceEditor>
                    </Form-item>
                    <Form-item>
                        <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                        <Button type="ghost" v-if="!goods_id" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                    </Form-item>
                </Form>
            </Card>
        </Col>
    </div>
</template>

<script>
    import tinymceEditor from '../website/editor'
    import uploadImg from '../website/upload';
    export default {
        components:{
            'tinymceEditor':tinymceEditor,
            'uploadImg':uploadImg,
        },
        data () {
            return {
                goods_id: '',
                formValidate: {
                    cat_id: null,
                    goods_name: '',
                    goods_sn: '',
                    price: '',
                    market_price: '',
                    sort: 1,
                    virtual_sales: parseInt(10000*Math.random()),
                    is_online: 1,
                    is_real: 1,
                    cover_img: '',
                    abstract:'',
                    goods_desc: '',
                },
                ruleValidate: {
                    cat_id: [
                        { required: true, message: '请选择产品分类'},
                    ],
                    goods_name: [
                        { required: true, message: '产品名称不能为空' },
                        { type: 'string', max: 20, message: '最多为20位' },
                    ],
                    goods_sn: [
                        { required: true, message: '编号不能为空' },
                    ],
                    price: [
                        { required: true, message: '价格不能为空' }
                    ],
                    market_price: [
                        { required: true, message: '市场价不能为空' }
                    ],
                    sort: [
                        { required: true, message: '排序值不能为空' }
                    ],
                    is_online: [
                        { required: true, message: '请选择上线状态' }
                    ],
                    is_real: [
                        { required: true, message: '请选择类型' }
                    ],
                    cover_img: [
                        { required: true, message: '请上传图片' }
                    ],
                    abstract: [
                        { required: true, message: '请填写简介', trigger: 'blur' }
                    ],
                    goods_desc: [
                        { required: true, message: '请填写详情', trigger: 'blur' },
                    ],
                },
                catList:[],
                spinShow: true,
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let url = this.goods_id ? 'admin/goods/edit' : 'admin/goods/add';
                        let postData = this.formValidate;
                        postData.goods_id = this.goods_id; console.log(postData);
                        this.$http.post(url, this.$qs.stringify(postData)).then((res) => {
                            var d = res.data;
                            if (d.code == 0) {
                                this.$Notice.success({
                                    title: 'Success',
                                    desc: '操作成功'
                                });
                                this.$router.push({
                                    name: 'goodsList'
                                });
                            } else {
                                this.$Notice.error({
                                    title: 'Error Warning',
                                    desc: `Error：${d.msg}<br>`
                                });
                            }
                        });
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            uploadImg (data) {//监听上传子组件，获取上传结果
                console.log(data);
                this.formValidate.cover_img = data;
            },
            getEditor (data) {//监听编辑器
                console.log(data);
                this.formValidate.goods_desc = data;
            },
            getCat () {
                this.$http.post('admin/goods/getCat', this.$qs.stringify()).then((res) => {
                    var d = res.data;
                    if (d.code == 0) {
                        this.catList = d.data;
                    } else {
                        this.$Notice.error({
                            title: 'Error Warning',
                            desc: `Error：${d.msg}<br>`
                        });
                    }
                });
            },
            getOne () {
                this.$http.post('admin/goods/getOne', this.$qs.stringify({goods_id: this.goods_id})).then((res) => {
                    var d = res.data;
                    if (d.code == 0) {
                        this.formValidate = {
                            cat_id: d.data.cat_id,
                            goods_name: d.data.goods_name,
                            goods_sn: d.data.goods_sn,
                            price: d.data.price/100,
                            market_price: d.data.market_price/100,
                            sort: d.data.sort,
                            is_online: d.data.is_online,
                            is_real: d.data.is_real,
                            cover_img: d.data.cover_img,
                            abstract: d.data.abstract,
                            goods_desc: d.data.goods_desc,
                        };
                    } else {
                        this.$Notice.error({
                            title: 'Error Warning',
                            desc: `Error：${d.msg}<br>`
                        });
                    }
                });
            },
        },
        mounted() {
            this.$nextTick(() => {
                this.getCat();//获取分类

                this.goods_id = this.$route.query.goods_id;
                if (this.goods_id) {//如果产品ID存在则是编辑
                    this.getOne();
                }
            });
        },
    };
</script>
